<!-- 文件列表 -->
<template>
  <div class="file-list_box">
    <div class="header">
      <span>文件列表</span>
      <el-input
        style="width: 300px"
        v-model="searchData"
        placeholder="搜索文件名"
        size="small"
        suffix-icon="el-icon-search"
        @change="handleChange"
        clearable
      ></el-input>
    </div>
    <div class="file-list_content" v-loading="fileLoading">
      <template v-if="fileList.length > 0">
        <div v-for="item in fileList" :key="item.id" class="file_item">
          <div class="item">
            <el-image
              style="width: 32px; height: 36px"
              :src="
                getFileType(item.fileName) == 'image'
                  ? minioEndpoint_mini + item.content + '!32x32'
                  : require('@/assets/img/' +
                      getFileType(item.fileName) +
                      '.png')
              "
              :preview-src-list="[minioEndpoint_mini + item.content]"
            />
            <div class="info">
              <div class="m_info">
                <div class="top">{{ item.fileName }}</div>
                <div class="bottom">
                  {{ item.senderName }}|{{ item.receiverName }}的聊天
                </div>
              </div>
              <div class="r_info">
                <div class="r_date">{{ timeFormat(item.sendTime) }}</div>
                <div class="r_size">{{ formateFileSize(item.fileSize) }}</div>
              </div>
            </div>
            <div class="hover_operate_btn">
              <div class="btn" @click="handleFileForward(item)">
                <svg-icon iconClass="file-forward"></svg-icon>
                <span>转发</span>
              </div>
              <div class="btn" @click="handleFileDownload(item)">
                <svg-icon iconClass="file-download"></svg-icon>
                <span>下载</span>
              </div>
            </div>
            <el-progress
              class="propress"
              v-if="
                item.downloadProcessNum > 0 && item.downloadProcessNum < 100
              "
              :percentage="item.downloadProcessNum"
            ></el-progress>
          </div>
          <el-divider class="divider"></el-divider>
        </div>
      </template>
      <template v-else>
        <div class="no-content">暂无数据</div>
      </template>
    </div>
    <div class="pagination_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :pager-count="5"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMessageFilePage } from "@/api/chat"
import { formateSize } from "@/utils/chat"
import { FILE_TYPE, getFileType, MESSAGE_TYPE } from "@/utils/constant"
import { courseDownload } from "@/utils/file"
import * as math from "mathjs"
import { mathNum } from "@/utils/mathTool"
import { timeFormat } from "@/utils"
export default {
  data() {
    return {
      searchData: "",
      timeFormat,
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      fileList: [],
      fileLoading: false,
      params: {}
    }
  },

  computed: {
    contactContextmenu() {
      return [
        {
          text: "转发",
          click: (e, instance, hide) => {
            this.$forwardDialog.open({ ...instance, type: MESSAGE_TYPE.FILE })
            hide()
          },
          visible: () => {
            return true
          }
        }
      ]
    }
  },

  methods: {
    handleFileForward(item) {
      this.$forwardDialog.open({ ...item, type: MESSAGE_TYPE.FILE })
    },
    handleFileDownload(item) {
      if (item.downloadProcessNum > 0 && item.downloadProcessNum < 100) {
        this.$message.warning("文件正在下载中，请稍后")
        return
      }
      courseDownload(
        // eslint-disable-next-line no-undef
        minioEndpoint_mini + item.content,
        item.fileName,
        (e) => {
          item.downloadProcessNum = this.cumputeProcess(e.loaded, e.total)
        }
      )
    },
    cumputeProcess(a, b) {
      const num = math.multiply(mathNum.divide(a, b), 100).toFixed()
      return parseInt(num)
    },
    async getFileList(params, resetParams = true) {
      if (resetParams) {
        this.searchData = ""
        this.params = params
      }
      this.fileLoading = true
      const res = await getMessageFilePage({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        filter: {
          ...this.params.filter,
          fileName: this.searchData
        }
      })
      this.total = res.total
      this.fileList = res.data.records.map((item) => {
        return { ...item, downloadProcessNum: 0 }
      })
      this.fileLoading = false
    },
    handleChange() {
      this.getFileList(null, false)
    },
    getFileType(name) {
      const { fileType } = getFileType(name)
      return fileType
    },
    formateFileSize(size) {
      return formateSize(size)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.getFileList(null, false)
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getFileList(null, false)
    },
    handleMouseenter(event) {
      event.srcElement.classList.add("item_hover")
    }
  }
}
</script>
<style lang="less" scoped>
.file-list_box {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  .header {
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333333;
    font-weight: 600;
  }
  .file-list_content {
    flex: 1;
    overflow: auto;
    font-size: 12px;
    line-height: 12px;
    color: #999999;
    padding: 0 18px;
    .file_item {
      .item {
        display: flex;
        padding: 20px 5px;
        margin: 10px 0;
        border-radius: 4px;
        position: relative;
        .info {
          display: flex;
          flex: 1;
          justify-content: space-between;
          align-items: center;
          .m_info {
            margin-left: 12px;
            .top {
              font-size: 14px;
              color: #333333;
              font-weight: 600;
              padding-bottom: 9px;
            }
          }
          .r_info {
            display: flex;
            .r_date {
            }
            .r_size {
              padding: 0 10px 0 30px;
            }
          }
        }
        &:hover {
          background: #e1e6f0;
          .hover_operate_btn {
            display: block;
          }
        }
        .hover_operate_btn {
          display: none;
          position: absolute;
          top: 30px;
          left: 50%;
          font-size: 14px;
          color: rgb(1, 124, 246);
          svg {
            font-size: 18px;
          }
          // font-weight: bold;
          span {
            padding-left: 3px;
          }
          .btn {
            display: inline-block;
            cursor: pointer;
            margin-right: 30px;
          }
        }
        .propress {
          width: 100%;
          position: absolute;
          bottom: 1px;
        }
      }
      .divider {
        margin: 0 auto;
        width: 97%;
      }
    }

    .no-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 16px;
      color: #999999;
    }
  }
  .pagination_box {
    display: flex;
    justify-content: flex-end;
    margin: 10px;
  }
}
</style>
